import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import { confirm, downloadFile } from '@/utils/util'
import type { FilterDto } from '@/render/FilterRender'
import style from './period.module.scss'
import { getKeyToEnum, AllowStatusCnEnum, InsurancePerioPlanValidStatusCnEnum } from '@/const/enum'
import { deletePlans, exportPlans, getInsurancePlanList } from '@/api/insurance/period'
import DialogPlanActivityList from './DialogPlanActivityList'
import Drawer from '@/components/drawer/Index'
import DialogEditInsurancePlan from './DialogEditInsurancePlan'
import type { InsurancePlanDto } from '@/api/insurance/period/types'
import { Button, message, Tag } from 'ant-design-vue'

type ShowType = 'showActivity' | 'showEditPlan'

@Component
export class DialogInsurancePlan extends TableRender {
    @Prop() companyId!: number
    @Prop() show!: boolean
    @Prop() companyName!: string

    showDrawer = false
    noTablePadding = true

    showActivity = false
    showEditPlan = false
    curRow = {} as InsurancePlanDto

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDrawer = this.show
        if (this.showDrawer) {
            this.getData()
        }
    }

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }

    filterConfig() {
        return {
            isEnd: {
                name: '方案状态',
                element: 'select',
                options: getKeyToEnum(InsurancePerioPlanValidStatusCnEnum)
            },
            searchBeginTime: {
                name: '开始时间',
                element: 'dateTime',
                type: 'date',
                params: {
                    valueFormat: 'YYYY-MM-DD'
                }
            },
            searchEndTime: {
                name: '开始时间',
                element: 'dateTime',
                type: 'date',
                params: {
                    valueFormat: 'YYYY-MM-DD'
                }
            },
            isAllowedRepeat: {
                name: '重复投保',
                element: 'select',
                options: getKeyToEnum(AllowStatusCnEnum)
            },
            allowedDetermineStatus: {
                name: '减保',
                element: 'select',
                options: getKeyToEnum(AllowStatusCnEnum)
            },
            isCompanyAllowedRepeat: {
                name: '跨司投保',
                element: 'select',
                options: getKeyToEnum(AllowStatusCnEnum)
            }
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'insurCompanyName',
            title: '承保公司',
            fixed: 'left'
        },
        {
            field: 'insurCompanyPlanName',
            title: '保险方案',
            width: 300,
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return (
                        <div class="flex gap-10px">
                            <div>{row.insurCompanyPlanName}</div>
                            {row.type === 3 && <Tag color="warning">灵活投保</Tag>}
                            {row.type === 3 && <Tag color="warning">按日计费</Tag>}
                            {row.type === 4 && <Tag color="warning">月单</Tag>}
                            {row.type === 4 && <Tag color="warning">按月计费</Tag>}
                            {row.type === 5 && <Tag color="warning">即时生效</Tag>}
                            {row.type === 5 && <Tag color="warning">按日计费</Tag>}
                        </div>
                    )
                }
            }
        },
        {
            field: 'headCount',
            title: '当前在保人数',
            width: 120
        },
        {
            field: 'price',
            title: '1-3类价格'
        },
        {
            field: 'priceFour',
            title: '4类价格'
        },
        {
            field: 'priceFive',
            title: '5类价格'
        },
        {
            field: 'beginTime',
            title: '生效时间',
            width: 160
        },
        {
            field: 'endTime',
            title: '结束时间',
            width: 160
        },
        {
            field: 'hasEnsure',
            title: '首次投保',
            formatter: ({row}) => {
                return AllowStatusCnEnum[Number(row.hasEnsure)]
            }
        },
        {
            field: 'ensureLimitThree',
            title: '1-3类投保基数',
            width: 120
        },
        {
            field: 'ensureLimitFour',
            title: '非5类含4类投保基数'
        },
        {
            field: 'ensureLimitFive',
            title: '5类投保所需要14类基数'
        },
        {
            field: 'ensureLimit',
            title: '最低投保人数',
            width: 120
        },
        {
            field: 'insureBase',
            title: '5类投保占比'
        },
        {
            field: 'isAllowedRepeat',
            title: '重复投保',
            formatter: ({row}) => {
                return AllowStatusCnEnum[Number(row.isAllowedRepeat)]
            }
        },
        {
            field: 'isCompanyAllowedRepeat',
            title: '跨司投保',
            formatter: ({row}) => {
                return AllowStatusCnEnum[Number(row.isCompanyAllowedRepeat)]
            }
        },
        {
            field: 'allowedDetermineStatus',
            title: '允许减保',
            formatter: ({row}) => {
                return AllowStatusCnEnum[Number(row.allowedDetermineStatus)]
            }
        },
        {
            field: 'updatePlanCount',
            title: '方案修改记录',
            width: 120
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            width: 160,
            params: {
                buttons: [
                    {
                        text: '活动',
                        evnet: (row: InsurancePlanDto) => {
                            this.onShowDialog('showActivity', row)
                        }
                    },
                    {
                        text: '修改方案',
                        evnet: (row: InsurancePlanDto) => {
                            this.onShowDialog('showEditPlan', row)
                        }
                    },
                    {
                        type: 'danger',
                        text: '删除',
                        evnet: (row: InsurancePlanDto) => {
                            this.onDelete(row)
                        }
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<InsurancePlanDto>

    async onShowDialog(type: ShowType, row: InsurancePlanDto) {
        this.curRow = row
        this[type] = true
    }

    async onDelete(row: InsurancePlanDto) {
        await confirm('确定删除该方案?', '提示', {
            type: 'warning'
        })
        await deletePlans(row.id)
        message.success('删除成功')
        this.reloadPage()
    }

    getData() {
        this.onPage({
            type: 'current',
            currentPage: 1
        })
    }

    async onExport() {
        const res = await exportPlans({
            companyId: this.companyId,
            isDelete: 0
        })
        downloadFile(res)
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.companyId) return []
        return getInsurancePlanList({
            companyId: this.companyId,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    renderRightBtns() {
        return (
            <div class="-mt-12px">
                <Button type="primary" onClick={this.onExport}>
                    导出
                </Button>
            </div>
        )
    }

    render() {
        return (
            <>
                <Drawer
                    v-model={this.showDrawer}
                    size={900}
                    title="保险方案"
                    resetStyle={true}
                    showClose
                    v-slots={{
                        default: () => {
                            return <>{super.render()}</>
                        }
                    }}
                ></Drawer>
                <DialogPlanActivityList v-model:show={this.showActivity} planInfo={this.curRow} />
                <DialogEditInsurancePlan v-model:show={this.showEditPlan} planInfo={this.curRow} />
            </>
        )
    }
}

export default toNative<{ companyId: number }, {}>(DialogInsurancePlan)
